<template>
    <div class="app-container">

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="操作工序" prop="type">
                <el-select v-model="queryParams.type" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品编码" prop="productCode">
                <el-input v-model="queryParams.productCode" placeholder="请输入产品编码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="产线编码" prop="lineCode">
                <el-input v-model="queryParams.lineCode" placeholder="请输入产线编码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="设备编码" prop="benchCode">
                <el-input v-model="queryParams.benchCode" placeholder="请输入设备编码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="物料编码" prop="materialCode">
                <el-input v-model="queryParams.materialCode" placeholder="请输入物料编码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="工位编码" prop="positionCode">
                <el-input v-model="queryParams.positionCode" placeholder="请输入工位编码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="扫描物料编码" prop="materialCheckCode">
                <el-input v-model="queryParams.materialCheckCode" placeholder="请输入工位编码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="操作结果" prop="result">
                <el-select v-model="queryParams.result" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="dateRange">
				<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
					style="width: 240px" value-format="yyyy-MM-dd" end-placeholder="结束日期" @change="timeChange">
				</el-date-picker>
			</el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="ID" align="center" prop="id" width="60" />
            <el-table-column label="操作人" align="center" prop="createUserName" width="100" />
            <el-table-column label="操作工序" align="center" prop="type" width="100" />
            <el-table-column label="产品名称" prop="productName" width="240">
                <template slot-scope="scope">
                    <div>{{ scope.row.productName }}</div>
                    <div>{{ scope.row.productCode }}</div>
                </template>
            </el-table-column>
            <el-table-column label="产线" prop="lineName" width="100">
                <template slot-scope="scope">
                    <div>{{ scope.row.lineName }}</div>
                    <div>{{ scope.row.lineCode }}</div>
                </template>
            </el-table-column>
            <el-table-column label="设备" prop="benchName" width="100">
                <template slot-scope="scope">
                    <div>{{ scope.row.benchName }}</div>
                    <div>{{ scope.row.benchCode }}</div>
                </template>
            </el-table-column>
            <el-table-column label="工位" prop="positionNames" width="100">
                <template slot-scope="scope">
                    <div>{{ scope.row.positionNames }}</div>
                    <div>{{ scope.row.positionCode }}</div>
                </template>
            </el-table-column>
            <el-table-column label="物料" prop="materialName" width="200">
                <template slot-scope="scope">
                    <div v-html="scope.row.materialName"></div>
                    <div v-html="scope.row.materialCode"></div>
                </template>
            </el-table-column>

            <el-table-column label="替换物料" prop="materialReplaceName" width="300">
                <template slot-scope="scope">
                    <div v-html="scope.row.materialReplaceName"></div>
                    <div v-html="scope.row.materialReplaceCode"></div>
                </template>
            </el-table-column>
            <el-table-column label="操作结果" prop="result" width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.result == 0"><el-tag type="danger">对比失败</el-tag></div>
                    <div v-else><el-tag type="success">成功</el-tag></div>
                </template>
            </el-table-column>
            <el-table-column label="本次扫描物料" prop="materialCheckName" width="160">
                <template slot-scope="scope">
                    <div>{{ scope.row.materialCheckName }}</div>
                    <div>{{ scope.row.materialCheckCode }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作时间" align="center" prop="createTime" width="180" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { queryList, getInfo, remove, save, update } from "@/api/self/record";

export default {
    name: "productionUser",
    dicts: ["self_yes_no_success", "self_yes_no_danger"],
    data() {
        return {
            options: [
                {
                    value: 0,
                    label: '对比失败'
                }, {
                    value: 1,
                    label: '成功'
                }
            ],
            options1: [
                {
                    value: '上料',
                    label: '上料'
                }, {
                    value: '检测',
                    label: '检测'
                }, {
                    value: '续料',
                    label: '续料'
                }
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            dataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: undefined,
                productCode: undefined,
                lineCode: undefined,
                benchCode: undefined,
                materialCode: undefined,
                positionCode: undefined,
                materialCheckCode: undefined,
                result: undefined,
                beginTime: '',
				endTime: '',
            },
			dateRange: [],
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                lineName: [
                    { required: true, message: "产线名称不能为空", trigger: "blur" }
                ],
                lineCode: [
                    { required: true, message: "产线编码不能为空", trigger: "blur" }
                ]
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        timeChange(e) {
			console.log(e)
			if (e) {
				this.queryParams.beginTime = e[0]
				this.queryParams.endTime = e[1]
			} else {
				this.queryParams.beginTime = ''
				this.queryParams.endTime = ''
			}
		},
        /** 查询列表 */
        getList() {
            this.loading = true;
            queryList(this.queryParams).then((response) => {
                // response.rows.forEach(item => {
                //     if(item.materialReplaceName){
                //         item.materialReplaceName = item.materialReplaceName.replace(item.materialCheckName, `<span style="color:#1890ff">${item.materialCheckName}</span>`)
                //         item.materialReplaceCode = item.materialReplaceCode.replace(item.materialCheckCode, `<span style="color:#1890ff">${item.materialCheckCode}</span>`)
                //     }
                //     item.materialName = item.materialName.replace(item.materialCheckName, `<span style="color:#1890ff">${item.materialCheckName}</span>`)
                //     item.materialCode = item.materialCode.replace(item.materialCheckCode, `<span style="color:#1890ff">${item.materialCheckCode}</span>`)
                // });
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
			this.dateRange = []
            this.queryParams.beginTime = ''
			this.queryParams.endTime = ''
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id ? [row.id] : this.ids;
            this.$modal
                .confirm('是否确认删除编号为"' + ids + '"的数据项？')
                .then(function () {
                    return remove({ ids });
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
    },
};
</script>